import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { ProductCard, NavBar, SwipeCell, Button } from "react-vant";
import { removeBrowerList, toggleCollectList } from "../../store/modules/user/userActions";
const Index = () => {
  const userBrowerList = useSelector((state) => state.user.userBrowerList);
  const navigate = useNavigate();
  const dispatch = useDispatch()
  return (
    <div>
      <NavBar title="浏览记录" onClickLeft={() => navigate(-1)}></NavBar>
      {userBrowerList.map((v, i) => {
        return (
          <SwipeCell
            key={i}
            rightAction={
              <Button style={{ height: "100%" }} square type="danger" onClick={() => dispatch(removeBrowerList(v))}>
                删除
              </Button>
            }
          >
            <ProductCard
              key={i}
              price={v.pPrice}
              desc={v.productExtInfo.promoTagDet1}
              title={v.name}
              thumb={v.image}
            />
          </SwipeCell>
        );
      })}
    </div>
  );
};

export default Index;
